<template>
  <div style="margin: 15px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="交易概括" name="generalize" :key="'generalize'">
        <generalize  v-if="orderSituation"></generalize>
      </el-tab-pane>
      <el-tab-pane label="未完成订单" name="unfinished" :key="'unfinished'">
        <unfinished v-if="orderDetail"></unfinished>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>

  import orderSituation from '@/views/dataCentre/orderDataDetail/orderSituation/index';
  import orderDetail from '@/views/dataCentre/orderDataDetail/orderUnfinishedDetail/index';

  export default {
    components: {
      generalize: orderSituation,
      unfinished: orderDetail
    },
    data() {
      return {
        activeName: 'generalize',
        orderSituation: true,
        orderDetail: false
      };
    },
    //声明周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    methods: {
      handleClick(tab, event) {
        if (tab.name === 'generalize') {
          this.orderSituation = true
          this.orderDetail = false
        } else if (tab.name === 'unfinished') {
          this.orderSituation = false
          this.orderDetail = true
        }

      },

    }
  };
</script>
